<%@page import="java.util.HashMap"%>
<%@page import="com.ckeditor.CKEditorConfig"%>
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@taglib prefix="ui" tagdir="/WEB-INF/tags/UI"%>
<%@taglib prefix="msg" tagdir="/WEB-INF/tags/common/message"%>
<%@taglib prefix="ckeditor" uri="http://ckeditor.com"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<ui:baseHeader title="新建文章"></ui:baseHeader>
<style type="text/css">
.form-horizontal .control-label {
	text-align: left;
}

#labels span {
	margin: 0 5px;
}

[class^="cke"] input[type='text'] {
	height: auto;
}
</style>
</head>
<body>
	<ui:navigation index="5" />
	<div class="container">
		<div class="row">
			<div class="span2">
				<jsp:include page="/WEB-INF/manage/artical/articalnav.jsp"></jsp:include>
			</div>
			<div class="span10">
				<form:form cssClass="form-horizontal" method="post" commandName="article" modelAttribute="article">
					<div class="control-group">
						<label class="control-label" style="width: 58px">文章标题 </label>
						<div class="controls" style="margin-left: 70px">
							<form:input path="title" cssClass="input-xlarge" />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" style="width: 58px">文章分类</label>
						<div class="controls" style="margin-left: 70px">
							<form:select path="bar.aid">
								<form:option value="" label="请选择..." />
								<form:options items="${narList}" itemLabel="name" itemValue="aid" />
							</form:select>
						</div>
					</div>
					<div>
						<textarea id="editor" cols="80" rows="10" name="fileContent"></textarea>
					</div>
					<div id="lab-group" class="control-group" style="margin-top: 18px;">
						<label class="control-label" style='width: 58px'>标签 </label>
						<div class="controls" style="margin-left: 70px">
							<input type="text" id="label-input" class="input-xlarge" name="labels" /> <span class="help-inline">用逗号分开，不超过五个 </span>
							<div class="help-block">
								<label style="float: left; color: #0088CC">当前标签：</label>
								<p id="labels"></p>
							</div>
						</div>
					</div>
					<div style="margin-top: 10px">
						<input type="submit" value="提交" class="btn btn-primary" />
					</div>
				</form:form>
				<%
				    request.setAttribute("path", request.getContextPath()
									+ "/ckeditor/");
				%>
				<ckeditor:replace replace="editor" basePath="${path}"></ckeditor:replace>
			</div>
		</div>
	</div>
	<ui:baseFooter />
	<script type="text/javascript">
		$("#label-input").change(
				function() {
					var value = $(this).val();
					if (value != null && value.length != 0) {
						var html = '';
						var arr = value.split(',');
						if (arr.length < 6) {
							for ( var index in arr) {
								html += "<span class=\"label label-info\">"
										+ arr[index] + "</span>";
							}
							$("#lab-group").removeClass("error");
						} else {
							$("#lab-group").addClass("error");
						}
						$("#labels").html(html);
					} else {
						$("#labels").html("");
					}
				});
	</script>
</body>
</html>
